<template>
  <div>
    <div>
      <div class="my-flex">
        <el-input
          placeholder="根据标题搜索"
          clearable
          style="width: 20%; margin-right: 1%"
          v-model="article.articletitle"
        >
        </el-input>
        <el-input
          placeholder="根据文章内容搜索"
          clearable
          style="width: 20%; margin-right: 1%"
          v-model="article.articlecontent"
        >
        </el-input>
        <el-button
          icon="el-icon-search"
          circle
          @click="refreshPage()"
        ></el-button>
        <el-button
          icon="el-icon-delete"
          circle
          @click="article = {}"
        ></el-button>
      </div>
      <div class="my-flex">
        <el-table :data="articleList" style="width: 100%">
          <el-table-column type="index" width="50" label="序号">
            <template slot-scope="scope">
              {{ (pageIndex - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="articletitle" label="问题标题" width="450">
          </el-table-column>
          <!-- <el-table-column
                    prop="articlecontent"
                    label="内容"
                    width="250"
                  >
                  </el-table-column> -->
          <el-table-column prop="username" label="提问者" width="150">
          </el-table-column>
          <el-table-column prop="avatar" label="作者头像" width="150">
            <template slot-scope="scope">
              <el-image
                style="width: 100x; height: 100px"
                :src="scope.row.avatar"
                fit="fill"
              ></el-image>
            </template>
          </el-table-column>

          <el-table-column prop="createtime" label="创建时间" width="150">
          </el-table-column>
          <el-table-column prop="updatetime" label="更新时间" width="150">
          </el-table-column>
          <el-table-column prop="likecount" label="点赞数" width="150">
          </el-table-column>
          <el-table-column prop="replycount" label="回复数" width="150">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div class="my-flex">
                <el-button
                  type="warning"
                  style="margin-right: 10px"
                  @click="openDialog(scope.row)"
                  >修改</el-button
                >
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="是否删除该问题？"
                  @confirm="deleteArticleById(scope.row)"
                >
                  <el-button slot="reference" type="danger">删除</el-button>
                </el-popconfirm>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="my-flex">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="修改心理提问" :visible.sync="dialogVisible" width="40%">
      <el-form label-position="left" label-width="80px" :model="row">
        <el-form-item label="问题标题">
          <el-input v-model="row.articletitle"></el-input>
        </el-form-item>
        <el-form-item label="问题内容">
          <el-input
            type="textarea"
            :rows="10"
            v-model="row.articlecontent"
          ></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="row.username" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.avatar"
            fit="fill"
          ></el-image>
        </el-form-item>

        <el-form-item label="操作">
          <div class="my-flex">
            <el-button type="primary" @click="updateArticleById"
              >确定</el-button
            >
            <el-button @click="dialogVisible = false">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.refreshPage();
  },
  computed: {
    //返回封装好的查询参数
    articleParam() {
      let param = this.article;
      param.pageIndex = this.pageIndex;
      param.pageSize = this.pageSize;
      return param;
    },
  },
  data() {
    return {
      dialogVisible: false,
      articleList: [], //心理知识列表
      row: {}, //选中的行
      article: {}, //心理文章查询对象
      pageIndex: 1, //页数
      pageSize: 5, //页大小
      total: 0, //总条数
    };
  },
  methods: {
   
    //页面大小变化
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.refreshPage();
    },
    //当前页变化
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.refreshPage();
    },

    //格式化日期
    formattedDate(originalDate) {
      // 创建 Date 对象
      const date = new Date(originalDate);

      // 使用 Date 对象的方法获取年、月、日、小时、分钟和秒
      const year = date.getFullYear();
      const month = ("0" + (date.getMonth() + 1)).slice(-2);
      const day = ("0" + date.getDate()).slice(-2);
      const hours = ("0" + date.getHours()).slice(-2);
      const minutes = ("0" + date.getMinutes()).slice(-2);
      const seconds = ("0" + date.getSeconds()).slice(-2);

      // 将获取到的年月日时分秒拼接成指定格式的字符串
      const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

      return formattedDate;
    },
    //处理ArticleList
    handleArticleList(articleList) {
      // 使用 map 方法遍历用户列表并执行操作
      const modifiedAirticleList = articleList.map((article) => {
        article.avatar = this.$store.getters.getIpAddr + "/" + article.avatar;
        article.createtime = this.formattedDate(article.createtime);

        return article;
      });
      return modifiedAirticleList;
    },
    //根据获取条件心理文章列表
    getArticleListByCondition() {
      this.$request.postHttp({
        url: "/article/getArticleListByCondition",
        data: this.articleParam,
        success: (data) => {
          if (data.code == 200) {
            this.articleList = this.handleArticleList(data.articleList);
          }
        },
        error: (error) => {},
      });
    }, //获取心理文章总条数
    getKnowledgeCount() {
      this.$request.postHttp({
        url: "/article/getArticleCount",
        data: this.article,
        success: (data) => {
          if (data.code == 200) {
            this.total = data.total;
          }
        },
        error: (error) => {},
      });
    },
    //刷新页面
    refreshPage() {
      this.getArticleListByCondition();
      this.getKnowledgeCount();
    },
    //修改心理知识展示状态
    changeCarousel(row) {
      this.$request.postHttp({
        url: "/knowledge/updateCarouselById",
        params: {
          knowledgeid: row.knowledgeid,
          iscarousel: row.iscarousel,
        },
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
          }
        },
        error: (error) => {},
      });
    },
    //打开对话框
    openDialog(row) {
      this.row = row;

      this.dialogVisible = true;
    },
    //根据id修改心理问题
    updateArticleById() {
      let row = {};
      row.articleid = this.row.articleid;
      row.articletitle = this.row.articletitle;
      row.articlecontent = this.row.articlecontent;

      this.$request.postHttp({
        url: "/article/updateArticleById",
        data: row,
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.dialogVisible = false;
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
    deleteArticleById(row) {
      this.$request.postHttp({
        url: "/article/deleteArticleById",
        params: {
          articleId: row.articleid,
        },
        success: (data) => {
          if (data.code == 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
            this.refreshPage();
          }
        },
        error: (error) => {},
      });
    },
  },
};
</script>

<style scoped>
.my-flex {
  display: flex;
  align-items: center;
}
</style>